:root {
  --navbar-background: #f8f9fa;

  --navbar-padding: 0.8em;

  --responsive-margin: 3.5em;
  --li-margin: 2em;
  --li-text: #000000bb;

  --li-margin-vertical: 0.5em;

  --button-padding: 0.4em;
  --button-sgv-color: #00000090;
  --button-border-color: #00000060;
}

#navbar {
  width: calc(100%);
  box-sizing: border-box;

  height: auto;

  padding: var(--navbar-padding);

  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: left;

  background-color: var(--navbar-background);

  max-height: 500px;
}

#navbar * {
  font-size: large;
}

#nav-img {
  flex: 1 0 0;

  display: flex;
  align-items: center;
}

#nav-img > a {
  display: flex;
  align-items: center;
}

#navbar-toggle {
  all: unset;

  border: var(--button-border-color) solid 2px;
  border-radius: 5px;

  padding: calc(var(--button-padding)) calc(var(--button-padding) * 2);

  font-size: large;

  display: flex;
  align-items: center;
  justify-content: center;
}

#navbar-toggle > svg {
  scale: 2;
  fill: var(--button-sgv-color);
}

#navbar-toggle:hover {
  cursor: pointer;
}

#responsive {
  margin-right: var(--responsive-margin);

  overflow: hidden;
}

#responsive.open {
  max-height: 400px;
}

#navbar-toggle {
  margin-right: var(--responsive-margin);
}

#nav-menu {
  all: unset;
  display: flex;
  flex-direction: row;
}

#nav-menu > li {
  all: unset;
  margin-left: var(--li-margin);
}

a {
  all: unset;

  color: var(--li-text);
  font-size: larger;
}

a:hover {
  cursor: pointer;
}

@media only screen and (max-width: 1000px) {
  #responsive {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    width: 100%;
  }
  #nav-menu {
    margin-top: var(--li-margin-vertical);
    row-gap: var(--li-margin-vertical);
    flex-direction: column;
  }
  #responsive.open {
    max-height: 500px;
  }

  /* ul {
    flex-direction: column;
    margin-top: var(--li-margin-vertical);
  }

  li {
    margin-top: var(--li-margin-vertical);
  } */
}

@media only screen and (min-width: 1001px) {
  #navbar-toggle {
    display: none;
  }

  #responsive {
    max-height: 100px !important;
    height: auto;
  }
}

@media only screen and (max-width: 500px) {
  #navbar-toggle {
    margin-right: 1em;
  }
}